<style lang="scss" scoped>
    .cart{
        min-height: 92vh;
        background-color: #f5f5f5;
    }
    .list{
        padding-bottom: 8vh;
    }
    .item{
        padding: 15px 4%;
        background-color: #fff;
        display: flex;
        height: 90px;
        margin-top: 15px;
        .checkbox{
            width: 30px;
            line-height: 90px;
        }
        .headimg{
            width: 90px;
            height: 90px;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            img{
                width: 80%;
                border-radius: 7px;
                box-shadow: 0 0 5px #999;
            }
        }
        .desction{
            width: calc(100% - 150px);
            .title{
                max-height: 35px;
                line-height: 20px;
                font-size: 14px;
                font-weight: bold;
                margin-bottom: 5px;
                overflow: hidden;
            }
            .sku{
                height: 20px;
                line-height: 20px;
                font-size: 12px;
                overflow: hidden;
                span{
                    display: inline-block;
                    height: 20px;
                    line-height: 20px;
                    background-color: #f5f5f5;
                    border-radius: 3px;
                    padding: 0 7px;
                }
            }
            .tabBar{
                height: 25px;
                line-height: 25px;
                padding-top: 8px;
                display: flex;
                justify-content: space-between;
                .tabRight{
                    input{
                        width: 30px;
                    }
                    button{
                        width: 28.2px;
                        font-size: 25px;
                    }
                }
            }
        }
        .del{
            width: 30px;
            text-align: right;
        }
    }
    .tab{
        width: 92%;
        position: fixed;
        height: 60px;
        line-height: 60px;
        bottom: calc(8vh - 10px);
        padding: 5px 4%;
        background-color: #fff;
        display: flex;
        .btn{
            width: 60%;
            text-align: right;
            .vanBtn{
                display: inline-block;
                width: 85px;
                height: 35px;
                line-height: 35px;
            }
        }
    }
</style>
<template>
    <div class="cart">
        <p-navigator 
            text="购物车"
            is-btn
            :btn-text="btnText"
            :is-back="false"
            @click="btnClick"
            />
        <div class="list">
            <div class="item" v-for="item in list" :key="item.ID">
                <div class="checkbox">
                    <input type="checkbox" @change="soloChecked()" v-model="item.checked">
                </div>
                <div class="headimg">
                    <img :src="item.pro_img" alt="">
                </div>
                <div class="desction">
                    <div class="title">
                        {{ item.pro_title }}
                    </div>
                    <div class="sku">
                        <span>
                            {{ item.pro_sku }}
                        </span>
                    </div>
                    <div class="tabBar">
                        <div class="tabLeft">
                            ￥{{ item.pro_price }}
                        </div>
                        <div class="tabRight">
                            <button @click="item.pro_num <= 1 ? del(item.ID) : editNum(0,item)">
                                -
                            </button>
                            X <span> {{ item.pro_num }} </span>
                            <button @click="editNum(1,item)">
                                +
                            </button>
                        </div>
                    </div>
                </div>
                <div class="del">
                    <span @click="del(item.ID)">
                        ✖
                    </span>
                </div>
            </div>
        </div>
        <div class="tab">
            <div class="checkedAll">
                <input type="checkbox" v-model="allChecked" @change="allChange()">
            </div>
            <div class="btn">
                ￥ {{ countPrice }}
                <van-button v-if="btnText == '编辑'" round type="danger" class="vanBtn">
                    结算
                </van-button>
                <van-button v-else @click="allDel()" round type="danger" class="vanBtn">
                    删除
                </van-button>
            </div>
        </div>
    </div>
</template>
<script>
import { getCartList,delCartNum,editCartNum } from '@/api'
export default {
    methods: {
        /* 
            type = 0减法
            type = 1 加法
        */
        editNum(type,item){
            if(type == 0){
                item.pro_num--
            }else{
                item.pro_num++
            }
            editCartNum({
                address_id: item.ID,
                number: item.pro_num
            }).then(res => {
                if(res.data.code == 1){

                }
            })
        },
        btnClick(){
            this.btnText = this.btnText == '编辑' ? '完成' : '编辑'
        },
        allDel(){
            this.list.forEach(item => {
                if(item.checked){
                    this.del(item.ID)
                }
            })
        },
        del(address_id){
            delCartNum({address_id}).then(res => {
                if(res.data.code == 1){
                    this.$toast('删除成功')
                    // 调用获取购物车列表的接口
                    this.getList()
                }
            })
        },
        getList(){
            getCartList().then(res => {
                if(res.data.code == 1){
                    // 我们的复选框
                    this.list = res.data.result.map(e => {
                        let sku = JSON.parse(JSON.parse(e.pro_sku.replace(/'/g,"")));
                        e.pro_sku = sku[0].color+ "  " + sku[1].size
                        e.checked = false;
                        return e
                    })
                }
            })
        },
        soloChecked(){
            this.allChecked = this.list.every(item => item.checked == true);
        },
        allChange(){
            this.list.forEach(item => {
                item.checked = this.allChecked
            })
        }
    },
    // 计算属性
    computed:{
        countPrice(){
            let count = 0;
            this.list.forEach(item => {
                if(item.checked){
                    count += item.pro_price * item.pro_num
                }
            })
            return count
        }
    },
    created(){
        this.getList()
    },
    data() {
        return {
            // 全选的状态
            allChecked: false,
            // 右上脚按钮文字
            btnText: '编辑',
            list: []
        }
    },
}
</script>